<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.directive</title>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Vue.directive</h1>
    <hr>
    <div id="app">
        <div v-lifeng="color">{{num}}</div>
        <p><button @click="add">点击我++</button></p>
    </div>
    <!-- <div id="hook-arguments-example" v-demo:foo.a.b="message"></div> -->
</body>
<script>
    // Vue.directive('lifeng',function(el,binding){
    //     el.style='color:'+binding.value
    // })
    Vue.directive('lifeng',{
        bind:function(el,binding){ //被绑定
            console.log('1 - bind')
        },
        inserted:function(){//被绑定元素插入父节点时调用 
            console.log("2-inserted")
        },
        update:function(el,binding){//所在组件的 VNode 更新时调用
            console.log("3-update")
            el.style='color:'+binding.value
        },
        componentUpdated:function(){//指令所在组件的 VNode 及其子 VNode 全部更新后调用。
            console.log("4-componentUpdated")
        },
        unbind:function(){//只调用一次，指令与元素解绑时调用。
            console.log("5-unbind")
        }
    })
    var app = new Vue({
        el:"#app",
        data:{ 
            num:10,
            color:'red'
        },
        methods:{
            add(){
               this.num++ 
            }
        }
    })
    // Vue.directive('demo', {
    //     bind: function (el, binding, vnode) {
    //         var s = JSON.stringify
    //         el.innerHTML =
    //             'name: ' + s(binding.name) + '<br>' +
    //             'value: ' + s(binding.value) + '<br>' +
    //             'expression: ' + s(binding.expression) + '<br>' +
    //             'argument: ' + s(binding.arg) + '<br>' +
    //             'modifiers: ' + s(binding.modifiers) + '<br>' +
    //             'vnode keys: ' + Object.keys(vnode).join(', ')
    //     }
    // })

    // new Vue({
    //     el: '#hook-arguments-example',
    //     data: {
    //         message: 'hello!'
    //     }
    // })
</script>

</html>